<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

{block name="meta"}
<title>test</title>
<link rel="stylesheet" href="__CSS__/ava-test.css">
{/block}

	<link rel="stylesheet" href="__CDN__/amazeui/2.6.2/css/amazeui.min.css">
	<script src="__CDN__/amazeui/2.6.2/js/jquery.min.js"></script>
	<script src="__CDN__/amazeui/2.6.2/js/amazeui.min.js"></script>
	<script src="__CDN__/avalon.js/1.5.5/avalon.modern.shim.js"></script>

	<script>
		var logs = {$logs?'true':'false'};//日志开关
		var progress = $.AMUI.progress;
		function log(){
		 if(arguments.length == 1)  console.log(arguments[0]);
		 else if(arguments.length == 2)  console.log(arguments[0],arguments[1]);
		 else if(arguments.length == 3)  console.log(arguments[0],arguments[1],arguments[2]);
		 else console.log(arguments);
		};
	</script>

{block name="head"}
<script>
$(function(){  $('#key').focus(); })
avalon.config({ interpolate:["[[","]]"] });
var vm = avalon.define({
 $id: "test",
 dat:'',
 inp:[],
 state:'',
 param: [
    {foreach $field as $v}
    ['{$v[0]}','{$v[1]}','{$v[2]}'],
    {/foreach}
 ],
 msg:"相安无事",
 reparam: [
    {foreach $field as $v}
    ['{$v[0]}','{$v[1]}','{$v[2]}'],
    {/foreach}
 ],
 ret:function(){
    vm.param = vm.reparam;
    vm.msg   = '勿忘初心，回归本源';
 },
 add:function(){
    var len = vm.param.length;
    var inp = vm.inp;
    if(!inp[0]){ vm.msg = '无效操作';return; }else{
        logs && log('fun-add:',inp.$model);
        $('#key').focus();
        for (var i = 0; i < len; i++) {
            if(vm.param[i][0]==inp[0]){
                if(inp[1].length){
                    if(inp[1]!=vm.param[i][1]){
                        vm.msg = '修改参数:'+inp[0]+'='+inp[1];
                        vm.param[i].set(1,inp[1],vm.param[i][2]);
                    }else{ vm.msg = '无用操作'; }
                    $('tbody>tr').stop().removeClass().eq(i).addClass('am-primary');
                }else{
                    vm.msg = '删除参数:'+inp[0];
                    vm.param.splice(i,1);
                }
                vm.inp=[];
                return;
            }
        };
        if(!inp[1]){ vm.msg = '无效操作';return; }
        vm.msg = '添加参数:'+inp[0]+'='+inp[1];
        vm.param.push([inp[0],inp[1],'']);
        vm.inp=[];
        //等待vm-ready
        setTimeout(function(){$('tbody>tr').stop().removeClass().last().addClass('am-primary');},200);
        return;
    }
 },
 sub:function(){
    progress.start();
    var param = vm.param.$model,dat={};
    var len  = param.length;
    var k;
    for (var i = 0; i < len; i++) {
        k = param[i][0];
        if(k.slice(-2)=='[]'){
          k=k.slice(0,-2);
          if(dat[k] instanceof Array){}else{
            dat[k] = [];
          }
          dat[k].push(param[i][1]);
        }else{
          dat[k] = param[i][1];
        }
    };
    logs && log('vm-sub',dat);
    vm.msg = '提交请求';
    $.post('',dat,function(data) {
        logs && log('post-return-data:',data);
        if (data.indexOf("&quot;&lt;!DOCTYPE html&gt;")>0){
            vm.msg = '系统错误';
            // $('#err-modal .am-modal-bd').html(data);
            // $('#err-modal').modal('open');
        }
        vm.dat = data;
        progress.done();
    });
    var t = 10; //超时时间 秒
    setTimeout(function(){
        // 判断是否完成
        // vm.msg('请求超时:'+t+'秒');
        progress.done();
    },t*1000);
 },
 cha:function(e){
    logs && log('vm-cha',e);
    var dat = vm.param[e];
    vm.msg = '准备操作: '+dat[0];
    vm.inp = [];
    $('tbody>tr').stop().removeClass().eq(e).addClass('am-primary');
    vm.inp.pushArray([dat[0],dat[1]]);
    $('#val').focus();
 },
 key:function(e){
    var k = e.keyCode;
    if(k == 13){
     logs && log('vm-key',k,e.keyIdentifier);
     vm.add();
    }
 }
});
// avalon.scan();
</script>
{/block}

</head>
<body id="style-5">
{include file="template/header"}

{block name="body"}
<div class="title">  <h1>BOYE测试 <span>{$type?:'NO_API'}</span></h1>  </div>
<div class="content am-panel" ms-controller="test">
    <label>操作参数 【无key添加；有key修改,无value删除】</label>
    <div class="am-form-inline">
      <div class="am-form-group">
        <input type="text" class="am-form-field" id="key"  ms-duplex="inp[0]" placeholder="参数名">
      </div>
      <div class="am-form-group">
        <input type="text" class="am-form-field" id="val" ms-on-keydown="key" ms-duplex="inp[1]" placeholder="参数值">
      </div>
      <button class="am-btn" ms-click="add">确定</button>
      <div class="am-form-group am-padding">[[msg]]</div>
    </div>
    <table class="am-table am-table-hover am-table-bordered am-table-radius">
        <thead><tr><th>参数名</th><th>参数值</th><th>参数说明[**为必选]</th></tr></thead>
        <tbody>
        <tr ms-repeat="param" ms-click="cha($index)">
            <td ms-repeat-ele="el">[[ele|html]]</td>
        </tr>
        </tbody>
    </table>
    <p></p>
    <button class="am-btn am-btn-primary" ms-click="sub">启动</button>
    <button class="am-btn am-btn-primary" ms-click="ret">重置</button>
    <p></p>
    <label>请求结果</label>
    <p>[[dat|html]]</p>

<!-- <div class="am-modal am-modal-no-btn" tabindex="-1" id="err-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">系统错误
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd"></div>
  </div>
</div> -->

</div>
{/block}

{include file="template/footer"}
{block name="foot"}{/block}
</body>
</html>